<template>
  <div class="dashboard-container">
    <!-- 页面标题 -->
    <!-- <div class="dashboard-header">
      <div class="header-content">
        <h1 class="dashboard-title">
          <bank-outlined class="title-icon" />
          AnyPay 聚合支付平台
        </h1>
        <div class="header-info">
          <span class="current-time">{{ currentTime }}</span>
          <a-tag color="success" class="status-tag">
            <dot-chart-outlined />
            系统运行正常
          </a-tag>
        </div>
      </div>
    </div> -->

    <!-- 核心指标卡片 -->
    <div class="metrics-section">
      <a-row :gutter="24">
        <a-col :xs="24" :sm="12" :lg="6">
          <div class="metric-card metric-card--primary">
            <div class="metric-icon">
              <dollar-outlined />
            </div>
            <div class="metric-content">
              <div class="metric-value">¥{{ formatNumber(todayAmount) }}</div>
              <div class="metric-label">今日交易额</div>
              <div class="metric-trend trend-up">
                <arrow-up-outlined />
                <span>+{{ todayGrowth }}%</span>
                <span class="trend-text">较昨日</span>
              </div>
            </div>
            <div class="metric-chart">
              <div class="mini-chart">
                <div class="chart-bar" v-for="(value, index) in todayChartData" :key="index"
                     :style="{ height: value + '%' }"></div>
              </div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :lg="6">
          <div class="metric-card metric-card--success">
            <div class="metric-icon">
              <transaction-outlined />
            </div>
            <div class="metric-content">
              <div class="metric-value">{{ formatNumber(todayOrders) }}</div>
              <div class="metric-label">今日订单数</div>
              <div class="metric-trend trend-up">
                <arrow-up-outlined />
                <span>+{{ orderGrowth }}%</span>
                <span class="trend-text">较昨日</span>
              </div>
            </div>
            <div class="metric-chart">
              <div class="mini-chart">
                <div class="chart-bar" v-for="(value, index) in orderChartData" :key="index"
                     :style="{ height: value + '%' }"></div>
              </div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :lg="6">
          <div class="metric-card metric-card--warning">
            <div class="metric-icon">
              <shop-outlined />
            </div>
            <div class="metric-content">
              <div class="metric-value">{{ formatNumber(activeMerchants) }}</div>
              <div class="metric-label">活跃商户</div>
              <div class="metric-trend trend-up">
                <arrow-up-outlined />
                <span>+{{ merchantGrowth }}%</span>
                <span class="trend-text">本月新增</span>
              </div>
            </div>
            <div class="metric-chart">
              <a-progress
                type="circle"
                :percent="merchantActiveRate"
                :width="60"
                :stroke-width="8"
                stroke-color="#faad14"
                :show-info="false"
              />
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :lg="6">
          <div class="metric-card metric-card--info">
            <div class="metric-icon">
              <check-circle-outlined />
            </div>
            <div class="metric-content">
              <div class="metric-value">{{ successRate }}%</div>
              <div class="metric-label">成功率</div>
              <div class="metric-trend trend-up">
                <arrow-up-outlined />
                <span>+{{ successGrowth }}%</span>
                <span class="trend-text">较昨日</span>
              </div>
            </div>
            <div class="metric-chart">
              <a-progress
                type="circle"
                :percent="successRate"
                :width="60"
                :stroke-width="8"
                stroke-color="#1890ff"
                :show-info="false"
              />
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 图表和数据分析区域 -->
    <a-row :gutter="24" class="charts-section">
      <!-- 交易趋势图 -->
      <a-col :xs="24" :lg="16">
        <a-card class="chart-card" title="交易趋势分析" :bordered="false">
          <template #extra>
            <a-radio-group v-model:value="trendPeriod" button-style="solid" size="small">
              <a-radio-button value="today">今日</a-radio-button>
              <a-radio-button value="week">本周</a-radio-button>
              <a-radio-button value="month">本月</a-radio-button>
            </a-radio-group>
          </template>
          <div class="trend-chart-container">
            <div class="chart-legend">
              <div class="legend-item">
                <span class="legend-dot legend-dot--primary"></span>
                <span>交易金额</span>
              </div>
              <div class="legend-item">
                <span class="legend-dot legend-dot--success"></span>
                <span>订单数量</span>
              </div>
            </div>
            <div class="trend-chart">
              <div class="chart-grid">
                <div class="chart-line" v-for="(point, index) in trendData" :key="index">
                  <div class="data-point"
                       :style="{
                         height: (point.amount / maxAmount * 100) + '%',
                         background: 'linear-gradient(180deg, #1890ff, #36cfc9)'
                       }">
                  </div>
                  <div class="data-label">{{ point.label }}</div>
                </div>
              </div>
            </div>
          </div>
        </a-card>
      </a-col>

      <!-- 支付方式分布 -->
      <a-col :xs="24" :lg="8">
        <a-card class="chart-card" title="支付方式分布" :bordered="false">
          <div class="payment-distribution">
            <div class="distribution-chart">
              <div class="pie-chart">
                <div class="pie-segment pie-segment--alipay"
                     :style="{ '--percentage': paymentDistribution.alipay + '%' }">
                  <span class="segment-label">{{ paymentDistribution.alipay }}%</span>
                </div>
                <div class="pie-segment pie-segment--wechat"
                     :style="{ '--percentage': paymentDistribution.wechat + '%' }">
                  <span class="segment-label">{{ paymentDistribution.wechat }}%</span>
                </div>
                <div class="pie-segment pie-segment--union"
                     :style="{ '--percentage': paymentDistribution.union + '%' }">
                  <span class="segment-label">{{ paymentDistribution.union }}%</span>
                </div>
              </div>
            </div>
            <div class="distribution-legend">
              <div class="legend-item">
                <span class="legend-dot" style="background: #1890ff;"></span>
                <span class="legend-label">支付宝</span>
                <span class="legend-value">{{ paymentDistribution.alipay }}%</span>
              </div>
              <div class="legend-item">
                <span class="legend-dot" style="background: #52c41a;"></span>
                <span class="legend-label">微信支付</span>
                <span class="legend-value">{{ paymentDistribution.wechat }}%</span>
              </div>
              <div class="legend-item">
                <span class="legend-dot" style="background: #faad14;"></span>
                <span class="legend-label">银联支付</span>
                <span class="legend-value">{{ paymentDistribution.union }}%</span>
              </div>
              <div class="legend-item">
                <span class="legend-dot" style="background: #f5222d;"></span>
                <span class="legend-label">其他</span>
                <span class="legend-value">{{ paymentDistribution.others }}%</span>
              </div>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <!-- 实时数据和系统状态 -->
    <a-row :gutter="24" class="status-section">
      <!-- 实时交易流水 -->
      <a-col :xs="24" :lg="14">
        <a-card class="data-card" title="实时交易流水" :bordered="false">
          <template #extra>
            <a-badge status="processing" text="实时更新" />
          </template>
          <div class="transaction-stream">
            <div class="stream-header">
              <div class="stream-stats">
                <span class="stat-item">
                  <span class="stat-label">实时TPS:</span>
                  <span class="stat-value">{{ realtimeTPS }}</span>
                </span>
                <span class="stat-item">
                  <span class="stat-label">队列长度:</span>
                  <span class="stat-value">{{ queueLength }}</span>
                </span>
              </div>
            </div>
            <div class="transaction-list">
              <div class="transaction-item" v-for="transaction in recentTransactions" :key="transaction.id">
                <div class="transaction-info">
                  <div class="transaction-id">{{ transaction.orderNo }}</div>
                  <div class="transaction-amount">¥{{ transaction.amount }}</div>
                </div>
                <div class="transaction-details">
                  <span class="transaction-method">{{ transaction.paymentMethod }}</span>
                  <span class="transaction-time">{{ transaction.time }}</span>
                  <a-tag :color="getStatusColor(transaction.status)" size="small">
                    {{ transaction.status }}
                  </a-tag>
                </div>
              </div>
            </div>
          </div>
        </a-card>
      </a-col>

      <!-- 系统监控 -->
      <a-col :xs="24" :lg="10">
        <a-card class="data-card" title="系统监控" :bordered="false">
          <div class="system-monitor">
            <div class="monitor-grid">
              <div class="monitor-item">
                <div class="monitor-label">CPU使用率</div>
                <div class="monitor-value">
                  <a-progress
                    :percent="systemStatus.cpu"
                    :stroke-color="getProgressColor(systemStatus.cpu)"
                    :show-info="false"
                  />
                  <span class="progress-text">{{ systemStatus.cpu }}%</span>
                </div>
              </div>
              <div class="monitor-item">
                <div class="monitor-label">内存使用率</div>
                <div class="monitor-value">
                  <a-progress
                    :percent="systemStatus.memory"
                    :stroke-color="getProgressColor(systemStatus.memory)"
                    :show-info="false"
                  />
                  <span class="progress-text">{{ systemStatus.memory }}%</span>
                </div>
              </div>
              <div class="monitor-item">
                <div class="monitor-label">磁盘使用率</div>
                <div class="monitor-value">
                  <a-progress
                    :percent="systemStatus.disk"
                    :stroke-color="getProgressColor(systemStatus.disk)"
                    :show-info="false"
                  />
                  <span class="progress-text">{{ systemStatus.disk }}%</span>
                </div>
              </div>
              <div class="monitor-item">
                <div class="monitor-label">网络延迟</div>
                <div class="monitor-value">
                  <span class="latency-value">{{ systemStatus.latency }}ms</span>
                  <a-tag :color="systemStatus.latency < 100 ? 'success' : 'warning'" size="small">
                    {{ systemStatus.latency < 100 ? '正常' : '偏高' }}
                  </a-tag>
                </div>
              </div>
            </div>

            <!-- 服务状态 -->
            <div class="service-status">
              <h4 class="status-title">服务状态</h4>
              <div class="service-grid">
                <div class="service-item" v-for="service in services" :key="service.name">
                  <div class="service-info">
                    <span class="service-name">{{ service.name }}</span>
                    <a-tag :color="service.status === 'running' ? 'success' : 'error'" size="small">
                      {{ service.status === 'running' ? '运行中' : '异常' }}
                    </a-tag>
                  </div>
                  <div class="service-metrics">
                    <span class="metric">响应时间: {{ service.responseTime }}ms</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <!-- 快捷操作区域 -->
    <div class="quick-actions">
      <a-card title="快捷操作" :bordered="false" class="actions-card">
        <div class="actions-grid">
          <div class="action-item" @click="navigateTo('/channel')">
            <div class="action-icon">
              <bank-outlined />
            </div>
            <div class="action-content">
              <div class="action-title">渠道管理</div>
              <div class="action-desc">管理支付渠道配置</div>
            </div>
          </div>
          <div class="action-item" @click="navigateTo('/merchant-management/merchant-list')">
            <div class="action-icon">
              <shop-outlined />
            </div>
            <div class="action-content">
              <div class="action-title">商户管理</div>
              <div class="action-desc">查看和管理商户信息</div>
            </div>
          </div>
          <div class="action-item" @click="navigateTo('/pay-test')">
            <div class="action-icon">
              <wallet-outlined />
            </div>
            <div class="action-content">
              <div class="action-title">支付测试</div>
              <div class="action-desc">测试支付功能</div>
            </div>
          </div>
          <div class="action-item" @click="navigateTo('/system-settings/overview')">
            <div class="action-icon">
              <setting-outlined />
            </div>
            <div class="action-content">
              <div class="action-title">系统设置</div>
              <div class="action-desc">配置系统参数</div>
            </div>
          </div>
        </div>
      </a-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import {
  BankOutlined,
  DollarOutlined,
  TransactionOutlined,
  ShopOutlined,
  CheckCircleOutlined,
  ArrowUpOutlined,
  ArrowDownOutlined,
  DotChartOutlined,
  WalletOutlined,
  SettingOutlined
} from '@ant-design/icons-vue'

const router = useRouter()

// 当前时间
const currentTime = ref('')
const updateTime = () => {
  currentTime.value = new Date().toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

// 核心业务数据
const todayAmount = ref(2580000)
const todayOrders = ref(8960)
const activeMerchants = ref(1580)
const successRate = ref(98.5)

const todayGrowth = ref(18.2)
const orderGrowth = ref(15.8)
const merchantGrowth = ref(12.5)
const successGrowth = ref(2.1)
const merchantActiveRate = ref(85)

// 图表数据
const todayChartData = ref([60, 80, 45, 90, 75, 100, 85])
const orderChartData = ref([70, 85, 60, 95, 80, 90, 100])

// 趋势数据
const trendPeriod = ref('today')
const trendData = ref([
  { label: '00:00', amount: 120000 },
  { label: '04:00', amount: 80000 },
  { label: '08:00', amount: 200000 },
  { label: '12:00', amount: 350000 },
  { label: '16:00', amount: 280000 },
  { label: '20:00', amount: 420000 },
  { label: '24:00', amount: 380000 }
])
const maxAmount = ref(450000)

// 支付方式分布
const paymentDistribution = reactive({
  alipay: 45,
  wechat: 35,
  union: 15,
  others: 5
})

// 实时数据
const realtimeTPS = ref(1250)
const queueLength = ref(23)

// 最近交易
const recentTransactions = ref([
  {
    id: 1,
    orderNo: 'AP202501150001',
    amount: '1,234.56',
    paymentMethod: '支付宝',
    status: '成功',
    time: '14:32:15'
  },
  {
    id: 2,
    orderNo: 'AP202501150002',
    amount: '2,345.67',
    paymentMethod: '微信支付',
    status: '处理中',
    time: '14:32:10'
  },
  {
    id: 3,
    orderNo: 'AP202501150003',
    amount: '3,456.78',
    paymentMethod: '银联支付',
    status: '成功',
    time: '14:32:05'
  },
  {
    id: 4,
    orderNo: 'AP202501150004',
    amount: '456.78',
    paymentMethod: '支付宝',
    status: '失败',
    time: '14:32:00'
  }
])

// 系统状态
const systemStatus = reactive({
  cpu: 45,
  memory: 68,
  disk: 32,
  latency: 85
})

// 服务状态
const services = ref([
  { name: '支付网关', status: 'running', responseTime: 45 },
  { name: '订单服务', status: 'running', responseTime: 32 },
  { name: '商户服务', status: 'running', responseTime: 28 },
  { name: '通知服务', status: 'running', responseTime: 56 }
])

// 定时器
let timeInterval: number
let dataInterval: number

onMounted(() => {
  updateTime()
  timeInterval = setInterval(updateTime, 1000)

  // 模拟实时数据更新
  dataInterval = setInterval(() => {
    // 更新实时TPS
    realtimeTPS.value = Math.floor(Math.random() * 500) + 1000
    queueLength.value = Math.floor(Math.random() * 50) + 10

    // 更新系统状态
    systemStatus.cpu = Math.floor(Math.random() * 30) + 30
    systemStatus.memory = Math.floor(Math.random() * 40) + 50
    systemStatus.latency = Math.floor(Math.random() * 50) + 50

    // 模拟新交易
    if (Math.random() > 0.7) {
      const newTransaction = {
        id: Date.now(),
        orderNo: `AP${Date.now().toString().slice(-10)}`,
        amount: (Math.random() * 5000 + 100).toFixed(2),
        paymentMethod: ['支付宝', '微信支付', '银联支付'][Math.floor(Math.random() * 3)],
        status: Math.random() > 0.1 ? '成功' : '处理中',
        time: new Date().toLocaleTimeString('zh-CN')
      }
      recentTransactions.value.unshift(newTransaction)
      if (recentTransactions.value.length > 6) {
        recentTransactions.value.pop()
      }
    }
  }, 3000)
})

onUnmounted(() => {
  if (timeInterval) clearInterval(timeInterval)
  if (dataInterval) clearInterval(dataInterval)
})

// 工具函数
const formatNumber = (num: number): string => {
  return num.toLocaleString('zh-CN')
}

const getStatusColor = (status: string): string => {
  const colors: Record<string, string> = {
    '成功': 'success',
    '处理中': 'processing',
    '失败': 'error'
  }
  return colors[status] || 'default'
}

const getProgressColor = (percent: number): string => {
  if (percent < 50) return '#52c41a'
  if (percent < 80) return '#faad14'
  return '#ff4d4f'
}

const navigateTo = (path: string) => {
  router.push(path)
}
</script>

<style scoped>
.dashboard-container {
  padding: 24px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;
}

/* 页面标题 */
.dashboard-header {
  margin-bottom: 32px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  padding: 24px 32px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.dashboard-title {
  font-size: 28px;
  font-weight: 700;
  color: #262626;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.title-icon {
  color: #1890ff;
  font-size: 32px;
}

.header-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.current-time {
  font-size: 16px;
  color: #595959;
  font-weight: 500;
}

.status-tag {
  font-weight: 500;
}

/* 核心指标卡片 */
.metrics-section {
  margin-bottom: 32px;
}

.metric-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  height: 160px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.metric-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.metric-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}

.metric-card--primary::before {
  background: linear-gradient(90deg, #1890ff, #36cfc9);
}

.metric-card--success::before {
  background: linear-gradient(90deg, #52c41a, #73d13d);
}

.metric-card--warning::before {
  background: linear-gradient(90deg, #faad14, #ffc53d);
}

.metric-card--info::before {
  background: linear-gradient(90deg, #722ed1, #9254de);
}

.metric-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: white;
}

.metric-card--primary .metric-icon {
  background: linear-gradient(135deg, #1890ff, #36cfc9);
}

.metric-card--success .metric-icon {
  background: linear-gradient(135deg, #52c41a, #73d13d);
}

.metric-card--warning .metric-icon {
  background: linear-gradient(135deg, #faad14, #ffc53d);
}

.metric-card--info .metric-icon {
  background: linear-gradient(135deg, #722ed1, #9254de);
}

.metric-content {
  flex: 1;
}

.metric-value {
  font-size: 32px;
  font-weight: 700;
  color: #262626;
  line-height: 1.2;
  margin-bottom: 4px;
}

.metric-label {
  font-size: 14px;
  color: #8c8c8c;
  margin-bottom: 8px;
}

.metric-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
}

.trend-up {
  color: #52c41a;
}

.trend-down {
  color: #ff4d4f;
}

.trend-text {
  color: #8c8c8c;
  margin-left: 4px;
}

.metric-chart {
  width: 80px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mini-chart {
  display: flex;
  align-items: end;
  gap: 2px;
  height: 40px;
}

.chart-bar {
  width: 4px;
  background: linear-gradient(180deg, #1890ff, #36cfc9);
  border-radius: 2px;
  min-height: 8px;
}

/* 图表区域 */
.charts-section {
  margin-bottom: 32px;
}

.chart-card {
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: none;
}

.trend-chart-container {
  height: 300px;
}

.chart-legend {
  display: flex;
  gap: 24px;
  margin-bottom: 20px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #595959;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.legend-dot--primary {
  background: #1890ff;
}

.legend-dot--success {
  background: #52c41a;
}

.trend-chart {
  height: 240px;
  position: relative;
}

.chart-grid {
  display: flex;
  align-items: end;
  justify-content: space-between;
  height: 200px;
  padding: 0 20px;
}

.chart-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.data-point {
  width: 24px;
  border-radius: 12px 12px 0 0;
  min-height: 20px;
}

.data-label {
  font-size: 12px;
  color: #8c8c8c;
}

/* 支付方式分布 */
.payment-distribution {
  height: 300px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.distribution-chart {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pie-chart {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(
    #1890ff 0% 45%,
    #52c41a 45% 80%,
    #faad14 80% 95%,
    #f5222d 95% 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.pie-chart::after {
  content: '';
  width: 60px;
  height: 60px;
  background: white;
  border-radius: 50%;
  position: absolute;
}

.distribution-legend {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.distribution-legend .legend-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
}

.legend-label {
  flex: 1;
  margin-left: 8px;
}

.legend-value {
  font-weight: 600;
  color: #262626;
}

/* 状态区域 */
.status-section {
  margin-bottom: 32px;
}

.data-card {
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: none;
}

/* 实时交易流水 */
.transaction-stream {
  height: 400px;
  display: flex;
  flex-direction: column;
}

.stream-header {
  margin-bottom: 20px;
}

.stream-stats {
  display: flex;
  gap: 32px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stat-label {
  color: #8c8c8c;
  font-size: 14px;
}

.stat-value {
  color: #262626;
  font-weight: 600;
  font-size: 16px;
}

.transaction-list {
  flex: 1;
  overflow-y: auto;
}

.transaction-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.3s ease;
}

.transaction-item:hover {
  background: #fafafa;
  margin: 0 -16px;
  padding: 12px 16px;
  border-radius: 8px;
}

.transaction-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.transaction-id {
  font-size: 14px;
  color: #262626;
  font-weight: 500;
}

.transaction-amount {
  font-size: 16px;
  color: #1890ff;
  font-weight: 600;
}

.transaction-details {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
}

.transaction-method {
  color: #595959;
}

.transaction-time {
  color: #8c8c8c;
}

/* 系统监控 */
.system-monitor {
  height: 400px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
}

.monitor-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}

.monitor-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 32px;
}

.monitor-label {
  font-size: 13px;
  color: #595959;
  width: 70px;
  flex-shrink: 0;
}

.monitor-value {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.progress-text {
  font-size: 13px;
  font-weight: 600;
  color: #262626;
  min-width: 35px;
  flex-shrink: 0;
}

.latency-value {
  font-size: 14px;
  font-weight: 600;
  color: #262626;
}

.service-status {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.status-title {
  font-size: 15px;
  font-weight: 600;
  color: #262626;
  margin: 0 0 12px 0;
}

.service-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 180px;
  overflow-y: auto;
  padding-right: 4px;
}

.service-grid::-webkit-scrollbar {
  width: 4px;
}

.service-grid::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 2px;
}

.service-grid::-webkit-scrollbar-thumb {
  background: #d9d9d9;
  border-radius: 2px;
}

.service-grid::-webkit-scrollbar-thumb:hover {
  background: #bfbfbf;
}

.service-item {
  padding: 10px 12px;
  background: #fafafa;
  border-radius: 6px;
  flex-shrink: 0;
}

.service-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  min-height: 20px;
}

.service-name {
  font-size: 13px;
  font-weight: 500;
  color: #262626;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-metrics {
  font-size: 11px;
  color: #8c8c8c;
  line-height: 1.2;
}

/* 快捷操作 */
.quick-actions {
  margin-bottom: 32px;
}

.actions-card {
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: none;
}

.actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.action-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: #fafafa;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-item:hover {
  background: #f0f8ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(24, 144, 255, 0.15);
}

.action-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #1890ff, #36cfc9);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
}

.action-content {
  flex: 1;
}

.action-title {
  font-size: 16px;
  font-weight: 600;
  color: #262626;
  margin-bottom: 4px;
}

.action-desc {
  font-size: 12px;
  color: #8c8c8c;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .dashboard-container {
    padding: 16px;
  }

  .header-content {
    padding: 20px;
  }

  .dashboard-title {
    font-size: 24px;
  }
}

@media (max-width: 768px) {
  .dashboard-container {
    padding: 12px;
  }

  .header-content {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .metric-card {
    height: auto;
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }

  .metric-value {
    font-size: 24px;
  }

  .actions-grid {
    grid-template-columns: 1fr;
  }

  .stream-stats {
    flex-direction: column;
    gap: 12px;
  }
}

/* 动画效果 */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.metric-card,
.chart-card,
.data-card,
.actions-card {
  animation: slideIn 0.6s ease;
}

.transaction-item {
  animation: slideIn 0.3s ease;
}
</style>